import Conversation from '@/components/Conversation';
import { colorStr, getQueryParams } from '@/utils/utils';
import { Card, List } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { history } from 'umi';
import styles from '../index.less';

interface Props {
  color: string;
  goodsDetail: string;
  business: any;
}

const GoodsInfor: React.FC<Props> = ({ color, goodsDetail, business }) => {
  const qs = getQueryParams();
  const [conversation, setConversation] = useState<boolean>(false);
  const [detail, setDetail] = useState<any[]>([]);

  useEffect(() => {
    if (goodsDetail !== undefined) {
      setDetail(goodsDetail.split('\n'));
    }
  }, [goodsDetail]);

  return (
    <div className={styles.informationContent}>
      <div className={styles.businessCard}>
        <Card
          title={
            <div>
              <img
                src={require('@/assets/images/店铺.svg')}
                style={{ marginBottom: 20 }}
                alt={'dsf'}
                className={styles.cardIco}
              />
              商品信息总览
            </div>
          }
          bordered={false}
          style={{ width: 1000, border: `1px solid ${color}` }}
        >
          <p>
            <img
              src={require('@/assets/images/掌柜.svg')}
              style={{ marginBottom: 20 }}
              alt={'dsf'}
              className={styles.cardIco}
            />
            商品介绍：
            <span style={{ marginLeft: 8 }}>
              <List
                size="small"
                bordered
                dataSource={detail}
                renderItem={(item) => <List.Item>{item}</List.Item>}
              />
            </span>
          </p>
          <p>
            <img
              src={require('@/assets/images/掌柜.svg')}
              style={{ marginBottom: 20 }}
              alt={'dsf'}
              className={styles.cardIco}
            />
            店铺名称： <span style={{ marginLeft: 8 }}> {business.saleName}</span>
          </p>
          <p>
            <img
              src={require('@/assets/images/掌柜.svg')}
              style={{ marginBottom: 20 }}
              alt={'dsf'}
              className={styles.cardIco}
            />
            掌柜： <span style={{ marginLeft: 8 }}> {business.nickname}</span>
          </p>
          <p>
            <img
              src={require('@/assets/images/经营类目.svg')}
              style={{ marginBottom: 20 }}
              alt={'dsf'}
              className={styles.cardIco}
            />
            联系电话：
            <span style={{ marginLeft: 8 }}>{business.tel}</span>
          </p>
          <p>
            <img
              src={require('@/assets/images/掌柜.svg')}
              style={{ marginBottom: 20 }}
              alt={'dsf'}
              className={styles.cardIco}
            />
            注册时间：
            <span style={{ marginLeft: 8 }}>
              {moment(Number(business.timeAdd)).format('YYYY-MM-DD HH:mm:ss')}
            </span>
          </p>
          {qs.role !== '3' && (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <img
                src={require('@/assets/images/客服.svg')}
                style={{ marginBottom: 20 }}
                alt={'dsf'}
                className={styles.cardIco}
              />
              客服：
              <div
                className={styles.customer}
                onClick={() => setConversation(true)}
                style={{
                  background: colorStr(3),
                }}
              >
                点击和我联系
              </div>
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div
              className={styles.intoSale}
              style={{
                background: colorStr(3),
              }}
              onClick={() => {
                history.push({
                  pathname: '/saleone',
                  query: { ...business, lastRoute: '商品详情' },
                });
              }}
            >
              进店逛逛
            </div>
          </div>
        </Card>
      </div>
      {conversation && (
        <Conversation
          receiveId={business.userId}
          color={color}
          business={business}
          visible={conversation}
          onCancel={() => {
            setConversation(false);
          }}
        />
      )}
    </div>
  );
};
export default GoodsInfor;
